<template>
	<view>
		<u-navbar title="禁言名单">
			<view slot="right" class="u-p-x-16 u-p-y-4 u-m-r-30 radius bg-blue" @tap="addMute">
				<text class="u-font-28">新增</text>
			</view>
		</u-navbar>
		<u-sticky>
			<view class="bg-white u-p-x-30 u-p-y-14 solid-bottom">
				<u-search v-model="name" placeholder="搜索禁言名单" :show-action="false"></u-search>
			</view>
		</u-sticky>
		<view class="u-flex u-p-x-30 u-p-y-20 bg-white u-border-bottom"
			v-for="(user,index) in list" 
			:key="index"
		>
			<u-avatar :src="user.avatar" mode="square"></u-avatar>
			<text class="u-flex-1 u-m-l-20 u-font-34">{{user.userName}}</text>
			<text class="bg-blue u-p-x-30 u-p-y-10 radius" @tap="removeMute(user)">解除禁言</text>
		</view>
		<view class="empty" v-if="nomore&&!list.length">
			<text class="u-font-28 text-gray">暂无数据</text>
		</view>
		<u-modal
			v-model="ask.show"
			showCancelButton
			:content="ask.content"
			@cancel="reject"
			@confirm="resolve"
		>
		</u-modal>
	</view>
</template>

<script>
	import {state} from "../bus.js"
	import {setGroupMuteMember,fetchGroupMuteList} from "@/api/addr.js"
	export default {
		data() {
			return {
				name:'',
				list:[],
				pageNo:1,
				pageSize:20,
				nomore:false,
				loading:false,
				lock:false,
				ask:{
					show:false,
					content:''
				},
				bridge:null,
			}
		},
		onLoad() {
			this.reset()
		},
		methods: {
			resolve(e){
				this.bridge&&this.bridge.resolve&&this.bridge.resolve(e)
			},
			reject(e){
				this.bridge&&this.bridge.reject&&this.bridge.reject(e)
			},
			async reset(){
				this.list = []
				this.pageNo = 1
				this.nomore = false
				await this.more()
			},
			async more(){
				if(this.loading){
					throw new Error('正在请求中')
				}
				try{
					this.loading = true
					if(this.nomore){
						return []
					}
					const list = await fetchGroupMuteList({
						id:state.info.id,
						name:this.name,
						pageNo:this.pageNo,
						pageSize:this.pageSize
					})
					if(!list||list.length<this.pageSize){
						this.nomore = true
					}else{
						this.pageNo++
					}
					this.list.push(...list.map((item)=>({...item})))
					return list
				}finally{
					this.loading = false
				}
			},
			async addMute(){
				if(this.lock){
					return 
				}
				const mutes = await new Promise((resolve,reject)=>{
					uni.navigateTo({
						url:`/pages/group/admin/addMute?id=${state.info.id}`,
						events:{
							confirm:resolve
						},
						fail:reject
					})
				})
				try{
					this.lock = true
					await setGroupMuteMember({id:state.info.id,state:1,userIds:mutes.join(',')})
					this.reset()
				}finally{
					this.lock = false
				}
			},
			async removeMute(item){
				if(this.lock){
					return 
				}
				await new Promise((resolve,reject)=>{
					this.bridge = {
						resolve,
						reject
					}
					this.ask.show = true
					this.ask.content = `确认将“${item.userName}”移除禁言名单?`
				})
				try{
					this.lock = true
					await setGroupMuteMember({id:state.info.id,state:0,userIds:item.userId})
					this.list = this.list.filter(({userId})=>userId!=item.userId)
				}finally{
					this.lock = false
				}
			}
		}
	}
</script>
<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.empty{
		padding: 100rpx 50rpx;
		text-align: center;
	}
</style>
